<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div class="box">
            <div class="box-item">1</div>
            <div class="box-item">2</div>
            <div class="box-item">3</div>
            <div class="box-item">4</div>
        </div>

        <div class="box box2">
            <div class="box-item">1</div>
            <div class="box-item">2</div>
            <div class="box-item">3</div>
            <div class="box-item">4</div>
            <div class="box-item">5</div>
            <div class="box-item">6</div>
            <div class="box-item">7</div>
        </div>

        <div class="box box3">
            <div class="box-item">1</div>
            <div class="box-item">2</div>
            <div class="box-item">3</div>
            <div class="box-item">4</div>
            <div class="box-item">5</div>
            <div class="box-item">6</div>
            <div class="box-item">7</div>
        </div>

        <div class="box box4">
                <div class="box-item">1</div>
                <div class="box-item">2</div>
                <div class="box-item">3</div>
                <div class="box-item">4</div>
                <div class="box-item">5</div>
                <div class="box-item">6</div>
                <div class="box-item">7</div>
        </div>

        <div class="box box5">
                <div class="box-item">1</div>
                <div class="box-item">2</div>
                <div class="box-item">3</div>
        </div>

        <div class="box box6">
                <div class="box-item">1</div>
                <div class="box-item">2</div>
                <div class="box-item">3</div>
        </div>
        
        <div class="box box7">
                <div class="box-item">1</div>
                <div class="box-item">2</div>
                <div class="box-item">3</div>
        </div>

        <div class="box box8">
                <div class="box-item">1</div>
                <div class="box-item">2</div>
                <div class="box-item">3</div>
        </div>

        <div class="box box9">
                <div class="box-item">1</div>
                <div class="box-item">2</div>
                <div class="box-item">3</div>
        </div>

        <div class="box box10 box-tall">
                <div class="box-item">1</div>
                <div class="box-item box-item-tall">2</div>
                <div class="box-item">3</div>
                <div class="box-item box-item-tall">4</div>
                <div class="box-item">5</div>

        </div>

        <div class="box box11 box-tall">
                <div class="box-item">1</div>
                <div class="box-item box-item-tall">2</div>
                <div class="box-item">3</div>
                <div class="box-item box-item-tall">4</div>
                <div class="box-item">5</div>

        </div>

        <div class="box box12 box-tall">
                <div class="box-item">1</div>
                <div class="box-item box-item-tall">2</div>
                <div class="box-item">3</div>
                <div class="box-item box-item-tall">4</div>
                <div class="box-item">5</div>

        </div>

        <div class="box box13 box-tall">
                <div class="box-item">1</div>
                <div class="box-item box-item-tall">2</div>
                <div class="box-item">3</div>
                <div class="box-item box-item-tall">4</div>
                <div class="box-item">5</div>

        </div>

        <div class="box box14 box-tall">
                <div class="box-item" style="padding-top:20px;">1</div>
                <div class="box-item box-item-tall">2</div>
                <div class="box-item">3</div>
                <div class="box-item box-item-tall">4</div>
                <div class="box-item">5</div>

        </div>

        <div class="box box-tall box15">
            <div class="box-item">1</div>
            <div class="box-item">2</div>
            <div class="box-item">3</div>
            <div class="box-item">4</div>
            <div class="box-item">5</div>
            <div class="box-item">6</div>
            <div class="box-item">7</div>
            <div class="box-item">8</div>
            <div class="box-item">9</div>
            <div class="box-item">10</div>
        </div>

        <div class="box box-tall box16">
            <div class="box-item">1</div>
            <div class="box-item">2</div>
            <div class="box-item">3</div>
            <div class="box-item">4</div>
            <div class="box-item">5</div>
            <div class="box-item">6</div>
            <div class="box-item">7</div>
            <div class="box-item">8</div>
            <div class="box-item">9</div>
            <div class="box-item">10</div>
        </div>

        <div class="box box-tall box17">
            <div class="box-item">1</div>
            <div class="box-item">2</div>
            <div class="box-item">3</div>
            <div class="box-item">4</div>
            <div class="box-item">5</div>
            <div class="box-item">6</div>
            <div class="box-item">7</div>
            <div class="box-item">8</div>
            <div class="box-item">9</div>
            <div class="box-item">10</div>
        </div>

        <div class="box box-tall box18">
            <div class="box-item">1</div>
            <div class="box-item">2</div>
            <div class="box-item">3</div>
            <div class="box-item">4</div>
            <div class="box-item">5</div>
            <div class="box-item">6</div>
            <div class="box-item">7</div>
            <div class="box-item">8</div>
            <div class="box-item">9</div>
            <div class="box-item">10</div>
            <div class="box-item">1</div>
        </div>

        <div class="box box-tall box19">
            <div class="box-item">1</div>
            <div class="box-item">2</div>
            <div class="box-item">3</div>
            <div class="box-item">4</div>
            <div class="box-item">5</div>
            <div class="box-item">6</div>
            <div class="box-item">7</div>
            <div class="box-item">8</div>
            <div class="box-item">9</div>
            <div class="box-item">10</div>
            <div class="box-item">1</div>
        </div>

        <!-- 用在具体的某一个项目上的属性 -->
        <div class="box box20">
            <div class="box-item">1</div>
            <div class="box-item" style="order:3">2</div>
            <div class="box-item">3</div>
            <div class="box-item" style="order:-1">4</div>
        </div>
        <div class="box box21">
            <div class="box-item">1</div>
            <div class="box-item" style="flex-grow:3">2</div>
            <div class="box-item">3</div>
            <div class="box-item" style="flex-grow:2">4</div>
        </div>

        <div class="box box22">
            <div class="box-item">1</div>
            <div class="box-item" style="flex-shrink:0">2</div>
            <div class="box-item">3</div>
            <div class="box-item" style="flex-shrink:2">4</div>
        </div>

        <div class="box box-tall box22">
            <div class="box-item" style="align-self:flex-end">1</div>
            <div class="box-item" style="align-self:center">2</div>
            <div class="box-item">3</div>
            <div class="box-item" style="align-self:center">4</div>
            <div class="box-item" style="align-self:flex-end">5</div>
        </div>

    </body>
</html>